<?xml version="1.0" encoding="UTF-8"?>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="./css/template.css" />
        <link type="text/css" rel="stylesheet" href="./css/SyntaxHighlighter.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Display Tag</title>
        <meta name="”Keywords”" content="affichage,collection,tableau,liste,Java,Java EE,Web,display,tag,articles,1,1,certification,sun,java,solaris,articles,essentiels,tips,astuces,codes,exemple,tutorial,developpement,jsp,servlet,jdbc,jdo,j2se,j2ee,laboratoire" />
        <script language="javascript" src="./js/shInit.js" />
        <script language="javascript" src="./js/shCore.js" />
        <script language="javascript" src="./js/shBrushCpp.js" />
        <script language="javascript" src="./js/shBrushCSharp.js" />
        <script language="javascript" src="./js/shBrushCss.js" />
        <script language="javascript" src="./js/shBrushDelphi.js" />
        <script language="javascript" src="./js/shBrushJava.js" />
        <script language="javascript" src="./js/shBrushJScript.js" />
        <script language="javascript" src="./js/shBrushPhp.js" />
        <script language="javascript" src="./js/shBrushPython.js" />
        <script language="javascript" src="./js/shBrushRuby.js" />
        <script language="javascript" src="./js/shBrushSql.js" />
        <script language="javascript" src="./js/shBrushVb.js" />
        <script language="javascript" src="./js/shBrushXml.js" />
        <author>Maxime Hambersin</author>
    </head>
    <body>
        <div class="chapter">
            <h2>I. Introduction</h2>
            <p>Cet article a pour but de vous présenter la TagLib J2EE appelée DisplayTags.Dans un premier temps, vous parcourrez les concepts de base des TagLibs, puis un tutorial vous expliquera comment installer les displayTags et finalement vous apprendrez à utiliser les DisplayTags dans vos JSP.</p>
            <p>Cet article s'adresse aux personnes possédant déjà les connaissances de base du développement d'applications web en J2EE. Particulièrement les notions de WebApp, Session, Requête et Réponse.</p>
            <p>Un des problèmes rencontrés lors de la génération de code html à l'aide de serveur d'applications est la qualité du rendu graphique qui en résulte. En effet, le html ne gère que des éléments rectangulaires et plus particulièrement des tables. Dans de nombreuses applications, on cherche à afficher dans une table html une collection d'objets.</p>
            <p>En J2EE, les displayTags offrent une solution rapide, pratique et efficace à ce problème. Cette taglib offre un mécanisme d'itération sur une collection très simple, celui-ci s'exécute directement depuis le code d'une jsp. Le résultat donne l'affichage d'un tableau en html avec une quantité d'option telles que les tris sur les colonnes, le groupement des données ou encore l'export du tableau sur un fichier.</p>
        </div>
        <div class="chapter">
            <h2>II. Qu'est ce qu'une taglib ?</h2>
            <p>Comme vous le savez, une JSP est une page de code qui peut contenir du html et du code Java servant à générer celui-ci. Malgré la puissance offerte par le langage Java, on se retrouve souvent à faire exactement la même chose au sein d'une page JSP (boucles, tests, récupération d'objets en Session, ?). Afin de faciliter le travail des développeurs, le langage J2EE offre un mécanisme permettant d'effectuer ces taches répétitives à l'aide de nouvelles balises. Ce mécanisme qui définit le fonctionnement des nouvelles balises s'appelle TagLib.</p>
            <p>
                Une taglib est composé d'au moins deux fichiers. Le premier est un fichier .jar qui contient l'ensemble des classes Java servant à effectuer les traitements sur les données.
                <br />
                Ces traitements sont assez abstraits pour pouvoir s'appliquer à tous les types d'objet. Le deuxième type de fichier le .tld (TagLib Descriptor) décrit la syntaxe, le nom et les options disponibles pour les nouvelles balises. Ces balises peuvent alors être utilisées dans n'importe quel WebApp qui importe les deux fichiers. Les fichiers .tld sont des fichiers xml, ceux-ci respectent une dtd disponibles sur l'url suivantes :
            </p>
            <p>
                <a href="http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd" target="_blank">http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd</a>
            </p>
            <p>Ce fichier dtd comprend le type de structure que le fichier xml doit respecter pour être valide.</p>
            <p>Exemples :</p>
            <div class="subChapter">
                <h3>1. Tags permettant d'itérer une collection et de récupérer les propriétés d'un objet de celle-ci :</h3>
                <textarea name="code" class="java">
                    <logic:iterate xmlns:logic="logic" id="aObject" collection="aCollection" indexid="indexAObject">&lt;%=indexAObject%&gt;
						&lt;%=aObject.toString()%&gt;</logic:iterate>
                </textarea>
            </div>
            <div class="subChapter">
                <h3>2. Tag permettant d'afficher une propriété d'un Objet :</h3>
                <textarea name="code" class="java">
                    <bean:write xmlns:bean="bean" name="aObject" property="theName" />
                </textarea>
                L'utilisation de TagLib est donc très fréquente dans le développement d'applications Web en J2EE.
                <br />
                Les TagLib permettent ainsi de minimiser les développements en html et de faciliter les accès aux données présentes en Session ou dans la requête.
            </div>
        </div>
        <div class="chapter">
            <h2>III. Installation des DisplayTags</h2>
            <p>
                En tant que TagLib, l'installation des DisplayTags est très simple. Elle nécessite néanmoins la connaissance de l'architecture d'une WebApp J2EE.
                <br />
                La première chose à faire est bien sûr de télécharger les DisplayTags. Vous pourrez les trouver librement à l'url suivante :
            </p>
            <p>
                <a href="http://displaytag.sourceforge.net/" target="_blank">http://displaytag.sourceforge.net/</a>
            </p>
            Ensuite, il suffit en fait de copier les deux fichiers (le .jar et le .tld) dans deux emplacements spécifiques.
            <br />
            On place le fichier de description (.tld) dans le répertoire %WebAppRoot%/WEB-INF
            <br />
            Le .jar quand à lui est placé dans le répertoire %WebAppRoot%/WEB-INF/lib
            <p>Pour pouvoir utiliser la TagLib DisplayTag, il suffit de faire l'import suivant dans la page jsp :</p>
            <textarea name="code" class="java">&lt;%@ taglib uri="/WEB-INF/displaytag-11.tld" prefix="display"%&gt;</textarea>
        </div>
        <div class="chapter">
            <h2>IV. Exemples d'utilisations :</h2>
            <p>Vous allez ici pouvoir comprendre comment utiliser les displaysTags dans votre code et quel en sera le rendu graphique.</p>
            <div class="subChapter">
                <h3>1. Un exemple Simple</h3>
                <p>Dans un premier temps, voici un exemple simple de création de table :</p>
                <textarea name="code" class="java">
                    &lt;%--EXEMPLE BASE--%&gt;
                    <display:table xmlns:display="display" name="test">
                        <display:column property="id" title="ID" />
                        <display:column property="name" />
                        <display:column property="email" />
                        <display:column property="status" />
                        <display:column property="description" title="Comments" />
                    </display:table>
                </textarea>
                <p>Ici, on va chercher la collection appelée test et pour chaque objet qu'elle contient, on va afficher les propriétés id, name, email, status et description. On voit que l'on peut également modifier l'entête d'une colonne à l'aide de l'attribut title.</p>
                <p>Voici le rendu sur la page html :</p>
                <p>
                    <img width="470" height="157" src="./images/clip_image007.jpg" />
                </p>
                <p>
                    Les displaytags offre un autre mécanisme appelé Decorator. Il s'agit en fait de classe héritant de la classe TableDecorator.
                    <br />
                    Dans ces classes on définit des méthodes qui seront appelée lors de la génération des tables.
                    <br />
                    Un mapping sera automatiquement effectué entre les attributs property des tags column ces méthodes.
                    <br />
                    On peut ainsi facilement modifier le rendu de l'affichage d'une colonne par exemple lorsque l'on veut afficher des monnaies ou des dates ou encore si l'on veut générer dynamiquement des liens html.
                </p>
                <p>Voici un exemple de classe Decorator :</p>
                <textarea name="code" class="java">
                    public class AdherentWrapper extends TableDecorator{
					/**
					* Creates a new AdherentWrapper decorator who's job is to
					* reformat some of the data located in AdherentV0.
					*/
					public AdherentWrapper()
					{
					super();
					}
					/**
					* Return the TestObject's ID as a hyperlink that the person can click
					* on and "drill down" for more details.
					* @return String
					*/
					public String getLink1()
					{
					AdherentV0 object = (AdherentV0) getCurrentRowObject();
					int index = getListIndex();
					return "
                    <a href="\&quot;details.jsp?index=&quot;+index+&quot;\&quot;">"+object.getId()+"</a>
                    ";
					}
					/**
					* Return an "action bar" of sorts that allow the user
					* to perform various actions on the TestObject vased on it's
					* id.
					* @return String
					*/
					public String getLink2()
					{
					AdherentV0 object = (AdherentV0) getCurrentRowObject();
					int id = object.getId();
					return "
                    <a href="\&quot;SearchAdherent.do?id=&quot;+" id="id" action="view\&quot;">View</a>
                    |"
					+ "
                    <a href="\&quot;SearchAdherent.do?id=&quot;+" id="id" action="edit\&quot;">Edit</a>
                    |"
					+ "
                    <a href="\&quot;SearchAdherent.do?id=&quot;+" id="id" action="delete\&quot;">Delete</a>
                    ";
					}
					}
                </textarea>
            </div>
            <div class="subChapter">
                <h3>2. Utilisation des Decorators</h3>
                <p>On utilise un Decorator dans les displayTags à l'aide du code suivant :</p>
                <textarea name="code" class="java">
                    &lt;%--Decorator--%&gt;
                    <display:table xmlns:display="display" name="sessionScope.details" decorator="org.displaytag.Wrapper">
                        <display:column property="link" title="ID" />
                        <display:column property="email" />
                        <display:column property="link2" title="Actions" />
                    </display:table>
                </textarea>
                <p>Voici un exemple de rendu sur la page html :</p>
                <p>
                    <img width="489" height="198" src="./images/clip_image010.jpg" />
                </p>
                Ces deux exemples sont assez simple tant dans leur utilisation que dans leur rendu.
                <br />
                On peut également obtenir un résultat très complet en combinant différentes options.
            </div>
            <div class="subChapter">
                <h3>3. Un exemple complet</h3>
                Voici un exemple de code assez complet :
                <textarea name="code" class="java">
                    &lt;%--Exemple Complet--%&gt;
                    <display:table xmlns:display="display" name="test" export="true" sort="list" pagesize="6">
                        <display:column property="city" title="CITY" group="1" sortable="true" headerclass="sortable" />
                        <display:column property="project" title="PROJECT" group="2" sortable="true" headerclass="sortable" />
                        <display:column property="amount" title="HOURS" />
                        <display:column property="task" title="TASK" />
                    </display:table>
                </textarea>
                <p>Et en voici le rendu graphique :</p>
                <p>
                    <img width="497" height="212" src="./images/clip_image012.jpg" />
                </p>
                <p>
                    Cet exemple est très complet, on constate que l'on peut effectuer des tris sur les deux premières colonnes.
                    <br />
                    On affiche que les 8 premiers résultats et les DisplayTags fournissent automatiquement un mécanisme pour lister les pages et passer de l'une à l'autre.
                    <br />
                    On peut également facilement faire des exports à l'aide de l'onglet du bas et ce vers trois type de fichier (Excel, CSV et XML).
                </p>
            </div>
        </div>
        <div class="chapter">
            <h2> V. Liste des options d'utilisation</h2>
            <p>Il existe une quantité d'options que l'on peut assigner aux tags des DisplayTags. On peut répartir ces options en deux parties.</p>
            <ul>
                <li>Celles qui concernent le tag &lt;display : table&gt; et donc qui s'applique à l'ensemble de la table</li>
                <li>Celles qui concernent le tag &lt;display : column&gt; et qui donc ne concerne qu'une seule colonne</li>
            </ul>
            <div class="subChapter">
                <h3>1. Options à appliquer à l'objet table :</h3>
                <table cellpadding="0">
                    <tbody>
                        <tr bgcolor="#CCCCFF">
                            <td valign="top">
                                <p>
                                    <a name="table_cellpadding" />
                                    <a name="table_class" />
                                </p>
                                <h2>Name</h2>
                            </td>
                            <td valign="top">
                                <p />
                                <h2>Description</h2>
                            </td>
                            <td valign="top">
                                <p />
                                <h2>Type</h2>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_decorator" />
                                    class
                                </p>
                            </td>
                            <td valign="top">
                                <p>Idem Attribut html</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_defaultorder" />
                                    decorator
                                </p>
                            </td>
                            <td valign="top">
                                <p>Référence à une classe TableDecorator. Celle-ci doit étendre la classe org.displaytag.decorator.TableDecorator. On utilise les TableDecorator pour effectuer des operations sur les listes telles qu'une somme ou le formatage d'une date.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_defaultsort" />
                                    defaultorder
                                </p>
                            </td>
                            <td valign="top">
                                <p>Le sens du tri par défaut pour une colonne. Valeurs autorisées : "ascending" (défaut) ou "descending"</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_export" />
                                    defaultsort
                                </p>
                            </td>
                            <td valign="top">
                                <p>L'index de la colonne utilise pour le tri par défaut commence à 1.</p>
                            </td>
                            <td valign="top">
                                <p>int</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_frame" />
                                    <a name="table_id" />
                                    export
                                </p>
                            </td>
                            <td valign="top">
                                <p>Active ou désactive l'export. Valeurs autorisées : true ou false</p>
                            </td>
                            <td valign="top">
                                <p>boolean</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_length" />
                                    id
                                </p>
                            </td>
                            <td valign="top">
                                <p>Une variable implicite de ce nom sera créée et disponible de puis la page et donc la table.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_list" />
                                    <a name="table_name" />
                                    length
                                </p>
                            </td>
                            <td valign="top">
                                <p>Nombre de ligne à afficher</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_offset" />
                                    <a name="table_pagesize" />
                                    name
                                </p>
                            </td>
                            <td valign="top">
                                <p>Référence à l'objet utilise comme source pour la table. Souvent une collection placée en session ou dans la requête.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_requestURI" />
                                    pagesize
                                </p>
                            </td>
                            <td valign="top">
                                <p>Nombre d'enregistrement dans la page.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_rules" />
                                    <a name="table_sort" />
                                    requestURI
                                </p>
                            </td>
                            <td valign="top">
                                <p>Lors de la création de lien pour les tris, les exports ou les regroupements, les valeurs générées par ces fonctions sont rajoutée à l'attribut requestURI.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="table_style" />
                                    sort
                                </p>
                            </td>
                            <td valign="top">
                                <p>Attribut définissant le scope des tris. On utilise 'page' pour ne trier que les occurrences affichées ou 'list' pour trier toute la liste.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>Style</p>
                            </td>
                            <td valign="top">
                                <p>Idem Attribut html</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="subChapter">
                <h3>2. Options à appliquer à chaque colonne :</h3>
                <table cellpadding="0">
                    <tbody>
                        <tr bgcolor="#CCCCFF">
                            <td valign="top">
                                <p />
                                <h2>Name</h2>
                            </td>
                            <td valign="top">
                                <p />
                                <h2>Description</h2>
                            </td>
                            <td valign="top">
                                <p />
                                <h2>Type</h2>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_autolink" />
                                    autolink
                                </p>
                            </td>
                            <td valign="top">
                                <p>Création automatique d'un lien vers l'url ou l'adresse e-mail contenu dans la colonne. Par défaut, false.</p>
                            </td>
                            <td valign="top">
                                <p>boolean</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_class" />
                                    class
                                </p>
                            </td>
                            <td valign="top">
                                <p>Idem Attribut html</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_decorator" />
                                    decorator
                                </p>
                            </td>
                            <td valign="top">
                                <p>Référence à une classe TableDecorator. Celle-ci doit étendre la classe org.displaytag.decorator.TableDecorator. On utilise les TableDecorator pour effectuer des operations sur les listes telles qu'une somme ou le formatage d'une date.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_group" />
                                    group
                                </p>
                            </td>
                            <td valign="top">
                                <p>Indice définissant les colonnes à groupée. On groupe une colonne pour ne pas répéter les valeurs identiques. Chaque colonne à grouper doit avoir un indice. Celui-ci commence à 1, il définit l'ordre dans lequel le groupement s'effectuera.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_headerClass" />
                                    headerClass
                                </p>
                            </td>
                            <td valign="top">
                                <p>Attribut html class que l'on appliquera aux entêtes des colonnes.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_href" />
                                    href
                                </p>
                            </td>
                            <td valign="top">
                                <p>Fournis la base de l'URL lorsque l'on veut générer dynamiquement un lien. Pour personaliser celui-ci en function de la ligne, on utilise les tags param*. Ceux-ci permettent de rajouter un paramètre à l'URL.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_maxLength" />
                                    maxLength
                                </p>
                            </td>
                            <td valign="top">
                                <p>Définit la longueur maximum du contenu d'une colonne. Un événement mouseover() est généré de manière à retourner sous forme de tooltip le contenu complet de la colonne.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_maxWords" />
                                    <a name="column_media" />
                                    <a name="column_nulls" />
                                    nulls
                                </p>
                            </td>
                            <td valign="top">
                                <p>Par défaut, les valeurs null ne sont pa affichées dans la colonne. Mettre cette valeur à true permet de les afficher. Cette option est souvent utilisée pour le déboguage.</p>
                            </td>
                            <td valign="top">
                                <p>boolean</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_paramId" />
                                    paramId
                                </p>
                            </td>
                            <td valign="top">
                                <p>Nom du paramètre que l'on utilisera pour la création d'url dynamiques. On peut en spécifier plusieurs tant qu'on lui attribute à chaque fois une valuer.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_paramName" />
                                    paramName
                                </p>
                            </td>
                            <td valign="top">
                                <p>Nom du bean JSP contenant une String et servant de valeur pour le paramètre spécifié par paramId lors de la creation d'URL dynamique. On peut aussi appelé un attribut en spécifiant la valeur à retourné à l'aide de l'opérateur « . »</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_property" />
                                    property
                                </p>
                            </td>
                            <td valign="top">
                                <p>Nom de la propriété du bean surlequel on itère servant à afficher les valeurs dans les colonnes.</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_sortable" />
                                    sortable
                                </p>
                            </td>
                            <td valign="top">
                                <p>Variable booléenne spécifiant si on peut trier la colonne.</p>
                            </td>
                            <td valign="top">
                                <p>boolean</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_style" />
                                    style
                                </p>
                            </td>
                            <td valign="top">
                                <p>Idem Attribut html .</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                        <tr bgcolor="#EEEEEE">
                            <td valign="top">
                                <p>
                                    <a name="column_title" />
                                    title
                                </p>
                            </td>
                            <td valign="top">
                                <p>Titre de la colonne (texte de la cellule TH).</p>
                            </td>
                            <td valign="top">
                                <p>String</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="chapter">
            <h2> VI. Conclusion :</h2>
            <p>
                Les DisplayTags offrent un mécanisme extrêmement simple à mettre en place et d'une grande puissance.
                <br />
                Ils permettent d'éviter de devoir développer des fonctionnalités souvent recherchées telles que le tri de colonne dans une table html.
                <br />
                Ils permettent également de personnaliser l'affichage des données à l'aide des Decorator pour les liens, les dates ou encore les monnaies.
                <br />
                Toutes ces options les rendent indispensable à toute application web développée en J2EE.
                <br />
                Ils ont d'ailleurs été repris dans de nombreux framework open source tel que Spring ou AppFuse.
            </p>
        </div>
    </body>
</html>

